<template>
	<view class="phone-main" :style="{height: '100%'}">
		<view class="phone-main-search">
			<text class="iconfont iconsousuo"></text>
			<input class="phone-main-input" v-model="phoneVal" @input="searchClick" style="height:40px;line-height: 40px;padding-left: 40px;" type="text" placeholder="请输入要搜索的数据"/>
		</view>
		<view style="background-color: #fff;">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-form-item uni-column">
						<view class="title">开户行名称<span class="form_validate">*</span></view>
					</view>
				</view>
				<view class="uni-list-cell-db">
					<input class="uni-pop-input"  v-model="collectionName" placeholder="请输入" />
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-form-item uni-column">
						<view class="title">收款单位名称<span class="form_validate">*</span></view>
					</view>
				</view>
				<view class="uni-list-cell-db">
					<input class="uni-pop-input"  v-model="collectionPerson" placeholder="请输入" />
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-form-item uni-column">
						<view class="title">收款单位账号<span class="form_validate">*</span></view>
					</view>
				</view>
				<view class="uni-list-cell-db">
					<input class="uni-pop-input"  v-model="collectionCard" placeholder="请输入" />
				</view>
			</view>
			
			<button class="submit-btn" :class="'bg-' + themeColor.name" :disabled="btnLoading" :loading="btnLoading" @click="saveCollection">
				保存并确定
			</button>
			
		</view>
		<text style="text-align: center;background-color: #fff;font-weight: 700;">记录列表</text>
		<view class="phoneDirectory" style="background-color: white;">
			<phone-list-edit style="width:100%"
			:phones="phones" 
			:letter="letter"
			:scrollAnimationOFF="scrollAnimationOFF" 
			@change="handlePhoneListIndex"
			@reset="handleReset"
			@handleClick="handleClick"
			@editInfo="editInfo"
			>
			</phone-list-edit>
			<!-- <phone-alphabet 
			:phones="phones"
			:phoneListIndex="phoneListIndex"
			@change="handleDatasetKey" 
			@scrollAnimationOFF="handleScrollAnimationOFF"
			@reset="handleReset"
			>
			</phone-alphabet> -->
		</view>
	</view>
</template>
<script>
	import phoneListEdit from './phone-list-edit.vue'
	import phoneAlphabet from './phone-alphabet.vue'
	
	export default {
		name:"phone-directory-collection",
		components:{
			phoneListEdit,
			phoneAlphabet
		},
		props:{
			phones:Object,
			default:false
		},
		data () {
			return {
				phoneVal:'',
				winHeight:0,
				letter : 'A',
				scrollAnimationOFF:true,
				phoneListIndex:'A',
				reset:true,
				collectionId:'',
				collectionName: '',
				collectionPerson: '',
				collectionCard: '',
			}
		},
		computed:{
			phonesEscape () {
				return escape(JSON.stringify(this.phones))
			}
		},
		mounted () {
			let windowHeight = uni.getSystemInfoSync().windowHeight
			
			// #ifndef APP-PLUS
			this.winHeight = windowHeight
			//#endif
			
			//#ifdef APP-PLUS
			this.winHeight = windowHeight - 56
			//#endif
 			if(!this.phones){
				uni.showToast({
					title: '没有数据',
					icon:"none",
					mask: false,
					duration: 1500
				})
			}
		},
		methods:{
			searchClick(){
				this.$emit('handleSearch',this.phoneVal)
			},
			handleClick (e) {
				let info = {
					collectionId: e.id,
					collectionName: e.bankName,
					collectionPerson: e.bankPersonName,
					collectionCard: e.bankCode
				}
				this.$emit('getCollectionInfo',e)
			},
			editInfo (e) {
				this.collectionId = e.id;
				this.collectionName = e.bankName;
				this.collectionPerson = e.bankPersonName;
				this.collectionCard = e.bankCode;
			},
			saveCollection(){
				let info = {
					collectionId:this.collectionId,
					collectionName: this.collectionName,
					collectionPerson: this.collectionPerson,
					collectionCard: this.collectionCard
				}
				this.$emit('saveCollection',info);
			},
			handleDatasetKey (val) {
				this.letter = val
			},
			handleScrollAnimationOFF (val) {
				this.scrollAnimationOFF = val
			},
			handlePhoneListIndex(val){
				if(this.reset){
					this.phoneListIndex = val
				}
			},
			handleReset (val){
				if(val){
					this.letter = ''
				}
				this.reset = val
			}
			
		}
	}
</script>

<style>
.phone-main{
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.phoneDirectory{
	display: flex;
	flex-direction: row;
}

.phone-main-search{
	background-color: #fff;
	padding: 10upx 20upx;
	border-bottom: 1px solid #e5e5e5;
}
.iconsousuo{
	position: absolute;
	font-size: 24px;
	line-height: 40px;
	left: 18px;
}

.phone-main-input{
	font-size:28upx;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 10upx 20upx 10upx 20upx;
}

.uni-pop-input{
	text-align: right;
	padding: 0 30px;
}
</style>
